import style from './mail.less'
import { Form, Input, Button} from 'antd';
import React, {useEffect} from 'react';
import { Table } from 'antd';
import {useSelector,useDispatch} from 'umi'
import {useState} from 'react'

// 表头数据
    const columns = [
        {
            key:'1',
            title: '发件人',
            dataIndex: 'from',
            render: (text: string) => <a>{text}</a>,
        },
        {
            key:'2',
            title: '收件人',
            dataIndex: 'to',
        },
        {
            key:'3',
            title: '主题',
            dataIndex: 'subject',
        },
        {
            key:'4',
            title: '发送时间',
            dataIndex: 'createAt',
            render:(item:string)=>{return item.replace('T',' ').slice(0,-5)}
        },
        {
            key:'5',
            title: '操作',
            render: () => <a>删除</a>
        }
    ];


export default function mail(){
    let [flag,setFlag] = useState(false)
    const [form] = Form.useForm();
    let mailModelData = useSelector((state)=>state.mail) //拿到mail模块的数据
    let dispatch = useDispatch()
    const onFinish = (values: any) => {
        dispatch({
            type:'mail/filterMailList',
            obj:values
        })
    }; 
    const onReset = () => {
        form.resetFields();
    };
    //表单操作
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[]) => { //全选多选的函数
            setFlag(selectedRowKeys.length >0?true:false)
        }
    };
    //点击分页
    function ShowSizeChange(current:number) {
        dispatch({
            type:'mail/getMailList',
            current
        })
    }

    useEffect(()=>{
        dispatch({
            type:'mail/getMailList',
        })
    },[])

    return <div className={style.mail}>
        <header>
            工作台/邮件管理
        </header>
        <main>
            <div>
                {/* 搜索区域 */}
                <div className={style.search}>
                    <Form form={form} onFinish={onFinish}>
                        <div style={{display:'flex'}}>
                            <Form.Item style={{marginRight:'20px'}} name="from" label="发件人" rules={[{ required: false }]}>
                                <Input style={{width:'141px',height:'32px'}}/>
                            </Form.Item>
                            <Form.Item style={{marginRight:'20px'}} name="to" label="收件人" rules={[{ required: false }]}>
                                <Input style={{width:'141px',height:'32px'}}/>
                            </Form.Item>
                            <Form.Item style={{marginRight:'20px'}} name="subject" label="主题" rules={[{ required: false }]}>
                                <Input style={{width:'141px',height:'32px'}}/>
                            </Form.Item>
                        </div>
                        <div className={style.submit}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
                    {/* 邮件列表 */}
                <div className={style.mailList}>
                    <div>
                        <button className={flag?style.btnActive:''}>
                            删除
                        </button>
                        <span>刷新</span>
                    </div>
                    <Table
                        rowKey="id"
                        rowSelection={{
                            ...rowSelection,
                            checkStrictly:false
                        }}
                        columns={columns}  //表头
                        dataSource={mailModelData.mailList[0]}  //表内容
                        pagination={{  //分页配置
                            pageSize: 12,
                            total:mailModelData.mailList[1],
                            onChange:(a:number)=>{ShowSizeChange(a)}
                            }
                          }
                    />
                </div>
            </div>
        </main>
    </div>
}